// components/listDialog/index.js
Component({
  lifetimes: {
    attached: function () {
      this.setData({
        selectValue: this.properties.value
      })
      let listData = this.properties.listData;
      let bigData = [];
      if (listData.length > 20) {
        let groupCount = listData.length / 20;
        for (let gIndex = 0; gIndex < groupCount; gIndex++) {
          let temp=(gIndex + 1) * 20 - 1;
          let lastGroupIndex = temp > listData.length - 1 ? listData.length - 1 : temp;
          let title = listData[gIndex * 20] + ' - ' + listData[lastGroupIndex]
          if (listData[gIndex * 20] == listData[lastGroupIndex]) {
            title = listData[gIndex * 20];
          }
          let dataList = listData.slice(gIndex * 20, gIndex * 20 + 20);
          let sliceData = [];
          for (var i = 0; i < dataList.length; i += 4) {
            sliceData.push(dataList.slice(i, i + 4));
          }
          bigData.push({
            title,
            dataList: sliceData
          });
        }
      }
      this.setData({
        bigData: bigData
      })
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {
    listData: Array,
    key: String,
    value: String
  },

  /**
   * 组件的初始数据
   */
  data: {
    topMaskVisible: false,
    bottomMaskVisible: true,
    selectValue: '',
    // 数据量大时使用这个字段
    bigData: []
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handelItemClick(event) {
      this.setData({
        selectValue: event.currentTarget.dataset.key
      })
    },
    scroll(e) {
      let windowHeight = wx.getSystemInfoSync().windowHeight;
      let scrollBottom = e.detail.scrollTop - (e.detail.scrollHeight - (windowHeight / 2 - 40 - 16));
      if (this.properties.listData.length > 20) {
        scrollBottom = e.detail.scrollTop - (e.detail.scrollHeight - (windowHeight * 0.8 - 40 - 16));
      }
      if (e.detail.scrollTop > 50) {
        this.setData({
          topMaskVisible: true
        });
      } else {
        this.setData({
          topMaskVisible: false
        });
      }

      if (scrollBottom > -30) {
        this.setData({
          bottomMaskVisible: false
        });
      } else {
        this.setData({
          bottomMaskVisible: true
        });
      }
    },
    onClose: function () {
      this.triggerEvent('onClose')
    },
    onSubmit: function () {
      this.triggerEvent('onSubmit', {
        'value': this.data.selectValue,
        'key': this.properties.key
      })
    }
  }
})